import React, {Component} from 'react';
import {Grid,Button,Dialog,Input,Radio,Feedback,NumberPicker} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import Title from '@icedesign/title';
import AuthMenuTree from '../AuthMenuTree';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;
const { Group: RadioGroup } = Radio;
/**
*  新增角色
*/
export default class AddRole extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible: false,
       role:{
       }
     }
  }

  onOpen = () => {
    this.setState({
      visible: true,
    })
  };

  onClose = () => {
    this.setState({
      visible: false,
    })
  };

  //初始化
  componentWillMount(){
    if(this.props.role != undefined ){
      this.setState({
        role:this.props.role
      });
    }else {
      //获取最大排序码
      API.getRoleMaxSort().then((res) => {
        this.setState({
          role:{
            sort:res.result.sort,
            status:'0'
          }
        });
      });
    }
  }

  //保存
  onOk = () => {
    this.refs.form.validateAll((errors, values) => {
      if(errors == null){
        API.saveRole(this.state.role).then((res) => {
          Feedback.toast.success("添加成功");
          this.props.reload();
          this.onClose();
        });
      }
    });
  }

  render(){
    return(
      <span>
        {
          this.props.role != undefined ?
            <a href="javaScript:;" onClick={this.onOpen}>编辑</a>
          :
            <Button onClick={this.onOpen} type="primary"> + 添加 </Button>
        }
        <Dialog
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="新增角色"
          className="add-user-dialog"
        >
          <IceFormBinderWrapper
            value={this.state.role}
            ref="form">
            <Row wrap={true} >
              <Col span='24'>
                <Title style={{margin: '0 0 10px 0'}}> 基本数据 </Title>
              </Col>
              <Col s='12' xxs='24'>
                <Row justify='center'>
                  <Col s='9' xxs='6' className="add-user-label">角色名称：</Col>
                  <Col s='15' xxs='18' >
                    <IceFormBinder required={true} message={"不能为空"} name="name" >
                      <Input />
                    </IceFormBinder>
                    <div><IceFormError className="err" name="name" /></div>
                  </Col>
                </Row>
              </Col>
              <Col s='12' xxs='24'>
                <Row justify='center'>
                  <Col s='9' xxs='6' className="add-user-label">角色编码：</Col>
                  <Col s='15' xxs='18' >
                    <IceFormBinder required={true} message={"不能为空"} name="auth_key" >
                      <Input />
                    </IceFormBinder>
                    <div><IceFormError className="err" name="auth_key" /></div>
                  </Col>
                </Row>
              </Col>
              <Col s='12' xxs='24'>
                <Row justify='center'>
                  <Col s='9' xxs='6' className="add-user-label">是否显示：</Col>
                  <Col s='15' xxs='18' style={{paddingTop:5}}>
                    <IceFormBinder required={true} message={"不能为空"} name="status" >
                      <RadioGroup onChange = {(val)=>{
                          this.state.role.status = val;
                          this.setState(this.state);
                        }}>
                        <Radio value={"0"} >启用</Radio>
                        <Radio value={"1"} >停用</Radio>
                      </RadioGroup>
                    </IceFormBinder>
                  </Col>
                </Row>
              </Col>
              <Col s='12' xxs='24'>
                <Row justify='center'>
                  <Col s='9' xxs='6' className="add-user-label">显示排序：</Col>
                  <Col s='15' xxs='18'>
                      <NumberPicker type="inline" min={0} onChange={(value)=>{
                          this.state.role.sort = value
                          this.setState(this.state)
                        }} value={this.state.role.sort}/>
                  </Col>
                </Row>
              </Col>
              <Col s='12' xxs='24'>
                <Row justify='center'>
                  <Col s='9' xxs='6' className="add-user-label">备注：</Col>
                  <Col s='15' xxs='18' >
                    <IceFormBinder name="remarks" >
                      <Input multiple={true} rows={2} maxLength={225} hasLimitHint={true}/>
                    </IceFormBinder>
                    <div><IceFormError className="err" name="remarks" /></div>
                  </Col>
                </Row>
              </Col>
              <Col s='12' xxs='24'>
              </Col>
              <Col span='24'>
                <Title style={{margin: '0 0 10px 0'}}> 菜单授权 </Title>
              </Col>
              <Col span='24'>
                <AuthMenuTree handleCheck={(mids,hmids)=>{
                    this.state.role.menu_ids = mids;
                    this.state.role.half_menu_ids = hmids;
                    this.setState(this.state);
                  }} checkedKeys={this.state.role.menu_ids}/>
              </Col>
            </Row>
          </IceFormBinderWrapper>
        </Dialog>
      </span>
    )
  }


}
